<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .so {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="so"></div>
    </div>
    <script>
        const d = document.querySelector('body');
        const f = document.querySelector('.fa');
        const s = document.querySelector('.so');
        console.log(d);
        s.addEventListener('click', function (e) {
            console.log(11111);
            e.stopPropagation();
            console.log(e.defaultPrevented);
            console.log(e);
        }, false)
        f.addEventListener('click', function (e) {
            console.log(22222);
            e.stopPropagation();
        }, false)
        d.addEventListener('click', function (e) {
            console.log(33333);
            e.stopPropagation();
        }, false)
        // 冒泡 在同一父元素下，相同的事件类型，函数中第三参数为false 从小到大
        // 捕获 为true 从大到小
    </script>
</body>

</html>